<template>
  <q-dialog
    :model-value="modelValue"
    @update:model-value="(value: boolean) => emit('update:modelValue', value)"
  >
    <div class="add-to-playlist-dialog column">
      <div class="title text-center q-my-md">Add to Playlist</div>
      <q-tabs
        v-model="tab"
        dense
        no-caps
        class="self-center"
        style="width: 300px; max-width: 400px"
      >
        <q-tab name="all" label="All" />
        <q-tab name="video" label="Videos" />
        <q-tab name="audio" label="Audios" />
      </q-tabs>
      <q-separator />
      <q-scroll-area class="fit col">
        <q-tab-panels v-model="tab" animated class="bg-transparent">
          <q-tab-panel name="all" class="q-pa-md">
            <div class="column fit q-gutter-y-md">
              <template v-for="item in all" :key="item.id">
                <AddToPlaylistVideoItem
                  :video="item"
                  v-if="item.constructor.name === 'Video'"
                />
                <AddToPlaylistAudioItem
                  :audio="item"
                  v-if="item.constructor.name === 'Audio'"
                />
              </template>
            </div>
          </q-tab-panel>
          <q-tab-panel name="video" class="q-pa-md">
            <div class="column fit q-gutter-y-md">
              <AddToPlaylistVideoItem
                v-for="video in videos"
                :key="video.id"
                :video="video"
              />
            </div>
          </q-tab-panel>
          <q-tab-panel name="audio" class="q-pa-md">
            <div class="column fit q-gutter-y-md">
              <AddToPlaylistAudioItem
                v-for="audio in audios"
                :key="audio.id"
                :audio="audio"
              />
            </div>
          </q-tab-panel>
        </q-tab-panels>
      </q-scroll-area>
      <q-separator class="q-mt-sm" />
      <div class="row justify-end q-ma-sm">
        <q-btn flat color="sub" label="Cancel" v-close-popup />
        <q-btn color="accent" label="Add" />
      </div>
    </div>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref, PropType, onBeforeMount, computed } from 'vue';
import Playlist from 'src/models/Playlist';
import AddToPlaylistVideoItem from './AddToPlaylistVideoItem.vue';
import AddToPlaylistAudioItem from './AddToPlaylistAudioItem.vue';
import { useUserStore } from 'src/stores/user-store';
const userStore = useUserStore();
const props = defineProps({
  playlist: {
    type: Object as PropType<Playlist>,
    required: false,
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['update:modelValue']);
const videos = computed(() => userStore.myVideos);
const audios = computed(() => userStore.myAudios);
const all = computed(() => {
  let arr: any[] = [];
  arr = arr.concat(videos.value, audios.value);
  return arr;
});
onBeforeMount(async () => {
  await userStore.getMyVideos();
  await userStore.getMyAudios();
});
const tab = ref('all');
</script>
<style lang="scss" scoped>
.add-to-playlist-dialog {
  width: 500px;
  height: 670px;
  background-image: linear-gradient(to bottom right, #242424, #1c1c1c);
  .title {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
